<template>
  <div class="article_list" ref="rightDiv">

    <el-skeleton v-for="item in [1, 2, 3]" :loading="loading" animated>
      <!-- 骨架屏幕 -->
      <template slot="template">
        <el-row>
          <el-skeleton-item variant="p" style="width: 50%" />
          <el-skeleton-item variant="text" style="width: 30%; float: right" />
        </el-row>
        <el-row style="display: flex; align-items: center">
          <el-skeleton-item variant="image" style="width: 50px; height: 50px" />
          <el-skeleton-item
            variant="text"
            style="width: 30%; margin-left: 10px"
          />
        </el-row>
        <el-skeleton-item variant="p" style="margin-top: 5px" />
        <el-skeleton-item variant="p" />
        <el-skeleton-item variant="p" />
        <el-skeleton-item variant="p" />
        <el-row class="row4">
          <el-button icon="el-icon-caret-top" size="small">赞同 0</el-button>
          <el-button icon="el-icon-caret-bottom" size="small"></el-button>
          <el-button type="text" class="text-button" icon="el-icon-s-comment"
            >0 条评论</el-button
          >
          <el-tooltip content="Bottom center" placement="bottom">
            <el-button type="text" class="text-button" icon="el-icon-share">
              分享
            </el-button>
            <div slot="content">
              <el-button icon="el-icon-document-copy" type="text"
                >复制连接</el-button
              >
            </div>
          </el-tooltip>
          <!-- <el-button
            type="text"
            class="text-button"
            icon="el-icon-collection-tag"
            >收藏</el-button
          > -->
        </el-row>
      </template>
    </el-skeleton>

    <!-- 文章列表 -->
    <el-row class="list" v-if="!loading">
      <el-row class="list_item" v-for="item in currentList" :key="item.id">
        <el-row class="row1">
          <el-col class="title">
            <router-link target="_blank" :to="`/article/${item.id}`">{{
              item.title
            }}</router-link>
          </el-col>
          <el-col class="time">{{ item.create_time | timeFormat }}</el-col>
        </el-row>
        <el-row class="row2">
          <router-link to="/">
            <div class="userInfo">
              <el-avatar
                class="img"
                shape="square"
                :src="item.author.imageUrl"
              ></el-avatar>
              <p class="name">{{item.author.nickName}}</p>
            </div>
          </router-link>
        </el-row>
        <el-row class="row3">
          <Folding :content="item.content | bufferToString"> </Folding>
        </el-row>
        <el-row class="row4">
          <el-button
            icon="el-icon-caret-top"
            v-if="item.isLike"
            size="small"
            type="primary"
            @click="handlerLike(item.id)"
            >已赞同
            {{ item.likeTotal }}
          </el-button>
          <el-button
            icon="el-icon-caret-top"
            v-else
            @click="handlerLike(item.id)"
            size="small"
            >赞同 {{ item.likeTotal }}</el-button
          >
          <el-button icon="el-icon-caret-bottom" size="small"></el-button>
          <el-button
            type="text"
            @click="showComments(item.id)"
            class="text-button"
            icon="el-icon-s-comment"
            >{{ item.commentsCount }}条评论</el-button
          >
          <el-tooltip content="Bottom center" placement="bottom">
            <el-button type="text" class="text-button" icon="el-icon-share">
              分享
            </el-button>
            <div slot="content">
              <el-button
                @click="copyShareUrl(item)"
                icon="el-icon-document-copy"
                type="text"
                >复制连接</el-button
              >
            </div>
          </el-tooltip>
          <!-- <el-button
            type="text"
            class="text-button"
            icon="el-icon-collection-tag"
            >收藏</el-button
          > -->
        </el-row>
        <el-row>
          <Comments v-if="item.commentsVisible" :articleId="item.id" />
        </el-row>
      </el-row>
    </el-row>

    <el-button v-if="!noMore" style="width: 100%" ref="more" @click="more"
      >点击加载更多</el-button
    >
    <el-button type="text" v-else style="width: 100%" ref="more"
      >没有更多数据了噢</el-button
    >
  </div>
</template>

<script>
import Comments from "@/views/front/comments/Comments";
import { getArticleList } from "@/api/article";
import { checkStatus } from "@/utils/utils";
import { timeFormat } from "@/utils/utils.js";
import Folding from "@/views/front/article/Folding";
import { like } from "@/api/like";
import { getToken } from "../../../utils/auth";
export default {
  components: { Folding, Comments },
  filters: {
    timeFormat,
    bufferToString(buffer) {
      return Buffer.from(buffer).toString("utf8");
    },
  },
  data() {
    return {
      currentList: [],
      pageNum: 0,
      pageSize: 5,
      noMore: false,
      loading: true,
    };
  },
  async created() {
    await this.getArticleList();
  },
  methods: {
    showComments(id) {
      this.currentList.forEach((article) => {
        if (article.id === id)
          article.commentsVisible = !article.commentsVisible;
      });
    },
    more() {
      this.pageNum++;
      if (this.pageNum * this.pageSize > this.$store.state.article.total) {
        this.noMore = true;
        return;
      }
      this.getArticleList();
    },
    async getArticleList() {
      try {
        const { pageNum, pageSize } = this;
        let option = {
          pageNum,
          pageSize,
          isShow:1
        };
        if (getToken()) option.user_id = getToken().id;
        const res = await getArticleList(option);
        this.$store.dispatch("article/SET_TOTAL", res.total);
        this.loading = false;
        console.log(res);
        if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
        this.currentList = [...this.currentList, ...res.data].map((article) => {
          return {
            ...article,
            commentsVisible: false,
          };
        });
      } catch (e) {
      } finally {
      }
    },
    // 复制链接
    copyShareUrl(article) {
      const h = this.$createElement;
      this.$notify({
        title: "复制成功",
        message: h("div", {}, [
          h("h5", { class: { h5: true } }, `${article.title} - siliwu的文章`),
        ]),
      });
      this.copy(
        `${article.title} - siliwu的文章 : ${location.href}article?articleId=${article.id}`
      );
    },
    copy(data) {
      let url = data;
      let oInput = document.createElement("input");
      oInput.value = url;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      console.log(oInput.value);
      document.execCommand("Copy"); // 执行浏览器复制命令
      oInput.remove();
    },
    async handlerLike(article_id) {
      if (!getToken()) return this.$message.warning("请先登录");
      const res = await like({ article_id });
      checkStatus(res);
      this.currentList.forEach((item) => {
        if (item.id === article_id) {
          if (item.isLike) {
            item.likeTotal = Math.max(0, item.likeTotal - 1);
          } else {
            item.likeTotal++;
          }
          item.isLike = !item.isLike;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.article_list {
  .list {
    .list_item + .list_item {
      border-top: 1px solid #eee;
    }

    .list_item {
      padding: 20px 0;
    }
  }
}

.row1 {
  display: flex;
}

.title {
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
}

.time {
  text-align: right;
  color: #8590a6;
  font-size: 15px;
}

.userInfo {
  display: flex;
  align-items: center;

  .img {
    margin-right: 10px;
  }

  .name {
    font-size: 15px;
    font-weight: 600;
    color: #444;
  }
}

.text-button {
  color: #8590a6;

  &:hover {
    color: #76839b;
  }
}
</style>
